<!--
 * @Author: Redbin
 * @Date: 2022-04-01 19:49:12
 * @LastEditTime: 2023-03-22 11:53:06
 * @LastEditors: asley 1870602550@qq.com
 * @Description:
 * @FilePath: /wisdom-website/components/Footer.vue
 * 以诗的格调出场，才对的起你流光溢彩的眼眸
-->
<template>
  <div class="wrap_footer">
    <div class="footer_con">
      <div v-for="(nav, index) in navList" :key="index" class="con_item">
        <div class="con_item_title" @click="handleMore(index)">
          <h3 class="flex-1">{{ nav.name }}</h3>
          <img
            class="w-3 h-3 md:hidden"
            :class="{ 'rotate-180': current === index }"
            src="~/assets/images/icon_arrow_down.png"
          />
        </div>
        <ul
          :style="{height: index === current ? 32 * nav.children.length + 'px': ''}"
          :class="{
            ul_active: current === index
          }"
        >
          <li v-for="(cNav, cInd) in nav.children" :key="cInd">
            <nuxt-link rel="nofollow" :to="{path: nav.path + (cNav.path || ''), hash: cNav.hash || ''} ">{{ cNav.name }}</nuxt-link>
          </li>
        </ul>
      </div>
      <div class="company_info">
        <div
          class="w-[120px] h-[36px] mx-auto md:inline-block mb-7 mt-7 md:mt-0"
        >
          <img
            class="w-full h-full md:inline-block"
            src="~/assets/images/logo.png"
          />
        </div>
        <!-- <div>
          <span class="text-sm text-slate-400">业务洽谈</span><br/>
          <a href="tel:18573135331" rel="nofollow" class="service-number">185 7313 5331</a>
        </div> -->
        <div>
          <span class="text-sm text-slate-400">商务合作</span><br/>
          <a href="tel:18570855995" rel="nofollow" class="service-number">戴经理 18570855995</a>
          <br/>
          <a href="tel:18670725213" rel="nofollow" class="service-number">夏经理 18670725213</a>
        </div>
        <div>
          <span class="text-sm text-slate-400">技术支持</span><br/>
          <a href="tel:15367825057" rel="nofollow" class="service-number">小智 15367825057</a>
        </div>
        <div class="mb-7 mt-4 md:inline-block">
          <img
            class="w-20 h-20 mx-auto md:inline-block mb-2"
            src="../assets/images/code.jpg"
          />
          <span class="text-sm text-slate-400 md:block">了解我们</span>
        </div>
      </div>
    </div>
    <div class="py-2 module-con flex items-center flex-wrap text-xs text-[#666]">
      <p>友情链接：</p>
      <nuxt-link rel="nofollow" class="mr-3" to="/">智慧工地官网</nuxt-link>
    </div>
    <div class="copyright">
      湖南联合智为信息技术有限公司 <br class="md:hidden" />
      Copyright &copy; 2013-2019 &nbsp; <a href="https://beian.miit.gov.cn" target="_blank" class="minicopyright">湘ICP备19025203号-1</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data() {
    return {
      current: null,
      winWidth: 0,
      navList: [
        {
          name: '产品中心',
          path: '/product',
          children: [
            {
              name: '联筑达 · 智慧工地政府级监管平台',
              path: '/lzd_government',
            },
            {
              name: '联筑达 · 智慧工地企业级管控平台',
              path: '/lzd_enterprise',
            },
            { name: '联筑达 · 智慧工地项目级管控平台', path: '/lzd_project' },
            { name: '筑训宝 · 劳务学习平台', path: '/zxb' },
            { name: '建巡宝 · 政务巡检/移动执法', path: '/jxb' },
            { name: '筑能达 · 建筑工地能耗监测管理平台', path: '/znd' },
          ],
        },
        {
          name: '解决方案',
          path: '/solution',
          children: [
            // { name: '自建房隐患排查系统', path: '/homescreen' },
            { name: '劳务实名制管理系统', path: '/labor' },
            { name: '环境监测系统', path: '/environment' },
            { name: '视频监控系统', path: '/video' },
            { name: '塔机监控系统', path: '/tower' },
            { name: '升降机监控系统', path: '/lift' },
            { name: '危大工程监管系统', path: '/danger' },
            { name: '混凝土搅拌站监控系统', path: '/stir' },
            { name: '物料进出监管系统', path: '/material' },
            { name: '水电能耗监测系统', path: '/energy' },
            { name: '车辆管理系统', path: '/vehicle' },
          ],
        },
        {
          name: '服务案例',
          path: '/case',
          children: [
            { name: '政府案例', hash: '#government' },
            { name: '项目案例', hash: '#project' },
          ],
        },
        {
          name: '新闻动态',
          path: '/news',
          children: [
            { name: '企业新闻', hash: '#enterprise' },
            { name: '行业资讯', hash: '#industry' },
          ],
        },
        {
          name: '关于我们',
          path: '/about',
          children: [
            { name: '公司介绍', hash: '#introduce' },
            { name: '荣誉资质', hash: '#honorary' },
            { name: '行业贡献', hash: '#industry' },
            { name: '团队风采', hash: '#team' },
            { name: '社会公益', hash: '#social' },
            { name: '联系我们', hash: '#contact' },
          ],
        },
      ],
    }
  },
  mounted() {
    // const _this = this;
  },
  methods: {
    handleMore(index) {
      if (window.innerWidth > 768) return
      this.current = this.current === index ? null : index
    },
  },
}
</script>

<style scoped>
.wrap_footer {
  @apply w-full h-auto relative;
  background: #fbfbfb;
  border: 1px solid #f0f0f0;
}
.footer_con {
  @apply relative w-full h-auto my-0 mx-auto pt-[43px]
  md:px-5 md:flex md:justify-between
  lg:px-14 xl:w-[75rem] xl:px-0;
  transition: 0.5s all;
}
.con_item {
  @apply px-10 md:px-0;
}
.con_item h3 {
  font-weight: 400;
  color: #333333;
  @apply text-base lg:text-xl;
}
.con_item ul {
  overflow: hidden;
  transition: 0.5s height;
  font-size: 15px;
  font-weight: 400;
  color: #555555;
  @apply h-0 leading-8 md:block md:h-auto;
}
.ul_active {
  display: block !important;
}
.con_item_title {
  @apply flex items-center h-12;
}
.company_info {
  @apply p-0 text-center md:text-right;
}
.service-number {
  font-weight: 800;
  color: #0966ff;
  @apply text-xl;
}
.copyright {
  width: 100vw;
  height: 52px;
  font-weight: 400;
  color: #5f6464;
  border-top: 1px solid #f2f3f5;
  @apply flex items-center justify-center text-xs md:text-sm;
}
.copyright .minicopyright:hover{
  color: #3a445d !important;
  text-decoration: underline;
}
</style>
